import searchBox from '@/components/search0.vue';
import footNav from '@/components/footerNav.vue';
import tab from './template/tab.vue';
import house from '@/components/longHouse.vue';

import rentPrice from './template/rentPrice.vue';   //租金排序
import areaList from './template/areaList.vue';     //区域排序
import filterChoose from './template/filter.vue';         //筛选
// import moreFilter from './template/moreFilter.vue';         //更多
import houseType from './template/houseType.vue';       //户型

import {mapState,mapMutations} from 'Vuex';
import {Toast,MessageBox} from 'mint-ui';

import MeScroll from 'mescroll.js';

export default {
  name:'houseList',
  data: () => ({
    houseInfo:[],
    tabMain:[{
			text:'区域',
			tabId:0
		},{
			text:'租金',
			tabId:1
		},{
			text:'户型',
			tabId:2
		},{
			text:'更多',
			tabId:0
		}],
    houseList:[],
    datalength:0,
    mescroll:null,
    showTab:false,
    tabIdx:'',
    popupArea:false,
    popupRent:false,
    popupFilter:false,    //筛选弹出层
    popupMore:false,
    popupHousetype:false,   //房屋类型开关

    rentType:'',           //长租1，短租2
    districtId:'',        //区县id
    distance:'',          //附近距离
    rentMoneyStart:'',    //最低租金
    rentMoneyEnd:'',      //最高租金，单位分
    roomNum:'',           //房间数量
    hallNum:'',           //厅
    washroomNum:'',           //卫
    state:'',             //整租1，转租64
    towardIds:'',         //朝向id，逗号分开(只能一个)
    houseAreaStart:'',    //最低面积
    houseAreaEnd:'',      //最高面积
    sort:'',              //排序，1租金由低到高，2租金由高到低，3面积由低到高，4面积由高到低
    currentPage:1,        //当前页
    showCount:10,         //每页显示记录数
    communityName:'',     //小区名称
    startTime:'',         //短租开始入住时间
    endTime:'',           //短租结束时间
  }),
  components:{
    searchBox,
    tab,
    house,
    rentPrice,
    areaList,
    filterChoose,
    moreFilter:()=>import('./template/moreFilter.vue'),
    houseType,
    footNav
  },
  computed:{
    ...mapState({
      searchValue:state=>state.house.searchKey,
      openCity:state=>state.house.openCity,
    })
  },
  methods: {
    // 搜索点击事件
    toSearch() {
      this.$router.push({name:'searchPage'});
    },
    hiddenTab() {   //点击遮罩层关闭弹窗
      var that = this;
      that.showTab = false;
      that.popupArea = false;
      that.popupRent = false;
      that.popupFilter = false;
      that.popupMore = false;
    },
    setTabidx(event){   //点击tab层
      // console.log(event);
      var that = this;
      that.tabIdx = event;
      that.showTab = true;
      var tabArr = this.tabArr;
      switch (event) {
        case 0:
          that.popupArea = true;
          that.popupRent = false;
          that.popupFilter = false;
          that.popupMore = false;
          that.popupHousetype = false;
          break;
        case 1:
          that.popupRent = true;
          that.popupArea = false;
          that.popupFilter = false;
          that.popupMore = false;
          that.popupHousetype = false;
          break;
        case 2:
          that.popupHousetype = true;
          that.showTab = false;
          that.popupFilter = false;
          that.popupRent = false;
          that.popupArea = false;
          that.popupMore = false;
          break;
        case 3:
          that.popupMore = true;
          that.popupRent = false;
          that.popupArea = false;
          that.popupFilter = false;
          that.showTab = false;
          that.popupHousetype = false;
          break;
        default:
          break;
      }

    },
    // 筛选
    filter() {
      var that = this;
      that.popupMore = false;
      that.popupRent = false;
      that.popupArea = false;
      that.popupFilter = true;
      that.showTab = true;
      that.popupHousetype = false;
    },
    showTabCK(idx){
      var that = this;
      that.tabIdx = idx;
    },
    // 选择区域内容
    areaEvent(data){
      var that = this;
      // console.log(data);
      var chooseType = data.chooseType;   //类型：0距离，1区域
      var chooseArea = data.chooseArea;   //选中的区域内容
      that.popupArea = false;
      that.showTab = false;
      that.tabMain[0].text = chooseArea.areaName;
      switch (chooseType) {
        case 0:     //距离
          that.districtId = '';
          that.distance = chooseArea.areaName
          break;
        case 1:     //区域
          that.districtId = chooseArea.areaId;
          break;
        default:

      }

      // this.getHouseList();
      // 下拉回调默认调用mescroll.resetUpScroll()
      this.mescroll.resetUpScroll();
      // 回到顶部，否则位置不对
      this.mescroll.scrollTo(0,300);
    },
    // 选择房源租金
    rentPriceEvnet(data){
      var that = this;
      console.log(data);
      var rentPrice = data.rentPrice;
      that.showTab = false;
      that.popupRent = false;
      that.tabMain[1].text = rentPrice.rentPrice;
      that.rentMoneyStart = rentPrice.rentMoneyStart;
      if(rentPrice.rentMoneyEnd==100000){
        console.log('选择1000元以下');
        that.rentMoneyEnd = 99900;
      }else{
        that.rentMoneyEnd = rentPrice.rentMoneyEnd;
      }


      // this.getHouseList();
      // 下拉回调默认调用mescroll.resetUpScroll()
      this.mescroll.resetUpScroll();
      // 回到顶部，否则位置不对
      this.mescroll.scrollTo(0,300);
    },
    // 选择户型
    houseTypeEvent(data){
      var that =  this;
      // console.log(data);
      var roomTxt = data[0];
      var liveTxt = data[1];
      var washTxt = data[2];
      that.roomNum = parseInt(roomTxt);
      that.hallNum = parseInt(liveTxt);
      that.washroomNum = parseInt(washTxt);
      if(data){that.tabMain[2].text = roomTxt+liveTxt+washTxt;}
      else that.tabMain[2].text = '户型';
      that.popupHousetype = false;

      // this.getHouseList();
      this.mescroll.resetUpScroll();
      // 回到顶部，否则位置不对
      this.mescroll.scrollTo(0,300);
    },
    // 更多
    moreFilterEvent(data){
      var that = this;
      console.log(data);
      that.popupMore = false;

        var houseArea = data.houseArea;   //面积
        var houseState = data.houseState;   //租约状态
        var houseToward = data.houseToward; //朝向
        that.houseAreaStart = houseArea?houseArea.houseAreaStart:'';
        that.houseAreaEnd = houseArea?houseArea.houseAreaEnd:'';
        that.state = houseState?houseState.state:'';
        that.towardIds = houseToward?houseToward.houseTowardId:'';
        // this.getHouseList();
        this.mescroll.resetUpScroll();
        // 回到顶部，否则位置不对
        this.mescroll.scrollTo(0,300);

    },
    // 排序
    filterEvent(data){
      var that = this;
      console.log(data);
      that.sort = data.sort;
      that.popupFilter = false;
      that.showTab = false;

      // this.getHouseList();
      this.mescroll.resetUpScroll();
      // 回到顶部，否则位置不对
      this.mescroll.scrollTo(0,300);
    },

    //上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
		upCallback: function(page) {
			//联网加载数据
			var self = this;
			self.getHouseList(page.num, page.size, function(curPageData) {
				//curPageData=[]; //打开本行注释,可演示列表无任何数据empty的配置

				//如果是第一页需手动制空列表 (代替clearId和clearEmptyId的配置)
				if(page.num == 1) self.houseList = [];

				//更新列表数据
				self.houseList = self.houseList.concat(curPageData);

				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
				console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length+", self.houseList.length==" + self.houseList.length);

				//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
				self.mescroll.endSuccess(self.datalength);

			}, function() {
				//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
				self.mescroll.endErr();
			});
		},
    // 获取房源列表
    getHouseList(pageNum,pageSize,successCallback,errorCallback) {
      var that = this;
      console.log(that.openCity);
      var distance = parseInt(that.distance) || '';
      console.log(distance);
      var houseParam = {
        rentType:that.rentType || 1,
        cityId:that.openCity.areaId,
        districtId:that.districtId,
        distance:distance,
        rentMoneyStart:that.rentMoneyStart,
        rentMoneyEnd:that.rentMoneyEnd,
        roomNum:that.roomNum,
        hallNum:that.hallNum,
        washroomNum:that.washroomNum,
        state:that.state,
        towardIds:that.towardIds,
        houseAreaStart:that.houseAreaStart,
        houseAreaEnd:that.houseAreaEnd,
        sort:that.sort,
        currentPage:pageNum,
        showCount:pageSize,
        communityName:that.communityName,
        startTime:that.startTime,
        endTime:that.endTime
      }

      network.get(configUrl.HOUSELIST_URL,houseParam,function(res){
        console.log(res);
        // that.houseList = res.dataList;
        var data=res.dataList;
        that.datalength = data.length;
        Toast('已为您找到'+res.houseCount+'条房源记录');
        // var listData=[];//模拟分页数据
        // for (var i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {
        //   if(i==data.length) break;
        //   listData.push(data[i]);
        // }
        successCallback&&successCallback(data);//成功回调

      },function(err){
        console.log(err);
        errorCallback&&errorCallback()//失败回调
      })
    },
    mescrollInit() {
      let self = this;
      self.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
        up: {
          callback: self.upCallback, //上拉回调
          //以下参数可删除,不配置
          isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
          //page:{size:8}, //可配置每页8条数据,默认10
          toTop:{ //配置回到顶部按钮
            // src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
            html: "", //html标签内容,默认null; 如果同时设置了src,则优先取src
            offset : 200
          },
          empty:{ //配置列表无任何数据的提示
            warpId:"dataList",
            icon : require("@/assets/images/attention@2x.png") ,
                  tip : "找不到相关房源~" ,
      //						  	btntext : "去逛逛 >" ,
      //						  	btnClick : function() {
      //						  		alert("点击了去逛逛按钮");
      //						  	}
          },
        }
      });
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    this.$nextTick(()=>{
      this.rentType = this.$route.query.rentType;
      this.state = this.$route.query.state;
      this.communityName = this.$route.query.searchValue;
      console.log(this.communityName);
      // this.getHouseList();
    });
    this.mescrollInit();
  },
  // beforeRouteLeave(to, from, next) {
  //        // 设置下一个路由的 meta
  //       to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
  //       next();
  //   },
  created() {
    //do something after creating vue instance

  },
  updated() {
    //do something after updating vue instance

  }
}
